<template>
  <div>
    <el-container>
      <el-header>
        <h2>
          <b>骑手管理</b>
        </h2>
      </el-header>
      <el-main>
        <el-form :inline="true" :model="rider" ref="rider" class="demo-form-inline" align="center">
          <el-form-item label="角色名称" prop="account">
            <el-input v-model="rider.account" placeholder="角色名"></el-input>
          </el-form-item>
          <el-form-item label="最低信誉" prop="credit1">
            <el-select v-model="rider.credit1" placeholder="请选择最低信誉">
              <el-option value="0"></el-option>
              <el-option value="1"></el-option>
              <el-option value="2"></el-option>
              <el-option value="3"></el-option>
              <el-option value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最高信誉" prop="credit2">
            <el-select v-model="rider.credit2" placeholder="请选择最高信誉">
              <el-option value="5"></el-option>
              <el-option value="4"></el-option>
              <el-option value="3"></el-option>
              <el-option value="2"></el-option>
              <el-option value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作状态" prop="workStatus">
            <el-select v-model="rider.workStatus" placeholder="请选择工作状态">
              <el-option label="全部" value="0"></el-option>
              <el-option label="待接单" value="1"></el-option>
              <el-option label="已接单" value="2"></el-option>
              <el-option label="离线" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="rider.status" placeholder="请选择状态">
              <el-option label="全部" value="0"></el-option>
              <el-option label="正常" value="1"></el-option>
              <el-option label="冻结" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="page=1;onSubmit()">查询</el-button>
            <el-button @click="resetForm('rider')">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table
          :data="tData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="account" label="账号" width="155"></el-table-column>
          <el-table-column prop="phoneNum" label="手机号" width="155"></el-table-column>
          <el-table-column prop="credit" label="信誉" width="155"></el-table-column>
          <el-table-column prop="profit" label="总收益" width="155"></el-table-column>
          <el-table-column prop="workStatus" label="工作状态" width="155" :formatter="formatWorkStatus"></el-table-column>
          <el-table-column prop="status" label="状态" width="155" :formatter="formatStatus"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="view(scope.row)" type="primary" size="mini">月收益</el-button>
              <el-button
                @click="changeStatus(scope.row)"
                type="danger"
                size="mini"
                v-if="scope.row.status==1"
              >冻结</el-button>
              <el-button
                @click="changeStatus(scope.row)"
                type="success"
                size="mini"
                v-if="scope.row.status==2"
              >解冻</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalNum"
          :page-size="3"
          align="center"
          :current-page="page"
          @current-change="handleCurrentChange"
        ></el-pagination>
        <br />
        <div align="center">
          <el-button type="danger" @click="delAll">批量冻结</el-button>
          <el-button type="success" @click="unDelAll">批量解冻</el-button>
        </div>
      </el-main>
    </el-container>

    <el-dialog
      title="月收入"
      :visible.sync="dialogFormVisibleView"
      :modal="false"
      :close-on-click-modal="false"
    >
      <el-form :inline="true" class="demo-form-inline" align="center">
        <el-form-item label="年份">
          <el-select v-model="year">
            <el-option :value="nowYear"></el-option>
            <el-option :value="nowYear-1"></el-option>
            <el-option :value="nowYear-2"></el-option>
            <el-option :value="nowYear-3"></el-option>
            <el-option :value="nowYear-4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="drawLine()">查询</el-button>
        </el-form-item>
      </el-form>
      <div ref="myChart" :style="{width: '700px', height: '300px'}"></div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import Qs from "qs";
export default {
  data() {
    return {
      rider: {
        account: "",
        credit1: "0",
        credit2: "5",
        workStatus: "0",
        status: "0",
      },
      tData: [],
      multipleSelection: [],
      totalNum: 0,
      page: 1,
      formLabelWidth: "120px",
      dialogFormVisibleView: false,
      timer: "",
      id: "",
      result: [],
      year: "",
      nowYear: "",
    };
  },
  created() {
    this.year = new Date().getFullYear();
    this.nowYear = new Date().getFullYear();
    this.onSubmit();
  },
  mounted() {
    clearInterval(this.timer);
    this.timer = setInterval(this.onSubmit, 60000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    onSubmit() {
      Axios.get("/tfss/admin/rider/listByPage", {
        params: {
          account: this.rider.account,
          credit1: this.rider.credit1,
          credit2: this.rider.credit2,
          workStatus: this.rider.workStatus,
          status: this.rider.status,
          page: this.page,
        },
      }).then((r) => {
        if (r.data.code == 200) {
          this.tData = r.data.data.records;
          this.totalNum = r.data.data.total;
        } else if (r.data.code == 403) {
          this.$message.error("没有权限");
        } else if (r.data.code == 703) {
          this.$message.error("未登录");
        } else if (r.data.code == 500) {
          this.$message.error("系统繁忙，请稍后再试");
        } else if (r.data.code == 704) {
          this.$message.error("登录失效，请重新登录");
        }
      });
    },
    view(row) {
      this.dialogFormVisibleView = true;
      this.id = row.id;
      this.$nextTick(function () {
        this.drawLine();
      });
    },
    drawLine() {
      Axios.get("/tfss/admin/order/getByRiderId", {
        params: {
          id: this.id,
          year: this.year,
        },
      }).then((r) => {
        if (r.data.code == 200) {
          this.result = r.data.data;
          // 基于准备好的dom，初始化echarts实例
          let bar_dv = this.$refs.myChart;
          let myChart = this.$echarts.init(bar_dv);
          // 绘制图表
          myChart.setOption({
            title: { text: "月收益" },
            tooltip: {},
            xAxis: {
              type: "category",
              data: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sept",
                "Oct",
                "Nov",
                "Dec",
              ],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "收益",
                data: this.result,
                type: "line",
              },
            ],
          });
        } else if (r.data.code == 403) {
          this.$message.error("没有权限");
        } else if (r.data.code == 703) {
          this.$message.error("未登录");
        } else if (r.data.code == 500) {
          this.$message.error("系统繁忙，请稍后再试");
        } else if (r.data.code == 704) {
          this.$message.error("登录失效，请重新登录");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    changeStatus(row) {
      this.$confirm("确认继续操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Axios.get("/tfss/admin/rider/changeStatus", {
            params: {
              id: row.id,
            },
          }).then((r) => {
            if (r.data.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.onSubmit();
            } else if (r.data.code == 403) {
              this.$message.error("没有权限");
            } else if (r.data.code == 703) {
              this.$message.error("未登录");
            } else if (r.data.code == 500) {
              this.$message.error("系统繁忙，请稍后再试");
            } else if (r.data.code == 704) {
              this.$message.error("登录失效，请重新登录");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    delAll() {
      this.$confirm("此操作将冻结所有已选择骑手, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (const row of this.multipleSelection) {
            if (row.status == "1") {
              Axios.get("/tfss/admin/rider/changeStatus", {
                params: {
                  id: row.id,
                },
              }).then((r) => {
                if (r.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: row.account + "冻结成功!",
                  });
                  this.onSubmit();
                } else if (r.data.code == 403) {
                  this.$message.error("没有权限");
                } else if (r.data.code == 703) {
                  this.$message.error("未登录");
                } else if (r.data.code == 500) {
                  this.$message.error("系统繁忙，请稍后再试");
                } else if (r.data.code == 704) {
                  this.$message.error("登录失效，请重新登录");
                }
              });
            } else {
              this.$message.warning(row.account + "已为冻结状态");
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    unDelAll() {
      this.$confirm("此操作将解冻所有已选择骑手, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (const row of this.multipleSelection) {
            if (row.status == "2") {
              Axios.get("/tfss/admin/rider/changeStatus", {
                params: {
                  id: row.id,
                },
              }).then((r) => {
                if (r.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: row.account + "解冻成功!",
                  });
                  this.onSubmit();
                } else if (r.data.code == 403) {
                  this.$message.error("没有权限");
                } else if (r.data.code == 703) {
                  this.$message.error("未登录");
                } else if (r.data.code == 500) {
                  this.$message.error("系统繁忙，请稍后再试");
                } else if (r.data.code == 704) {
                  this.$message.error("登录失效，请重新登录");
                }
              });
            } else {
              this.$message.warning(row.account + "已为正常状态");
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    formatWorkStatus(row, column, cellValue) {
      if (cellValue == "1") {
        return "待接单";
      } else if (cellValue == "2") {
        return "已接单";
      } else if (cellValue == "3") {
        return "离线";
      }
    },
    formatStatus(row, column, cellValue) {
      if (cellValue == "1") {
        return "正常";
      } else if (cellValue == "2") {
        return "冻结";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      Axios.get("/tfss/admin/rider/listByPage", {
        params: {
          account: this.rider.account,
          credit1: this.rider.credit1,
          credit2: this.rider.credit2,
          workStatus: this.rider.workStatus,
          status: this.rider.status,
          page: val,
        },
      }).then((r) => {
        if (r.data.code == 200) {
          this.tData = r.data.data.records;
          this.totalNum = r.data.data.total;
          this.page = val;
        } else if (r.data.code == 403) {
          this.$message.error("没有权限");
        } else if (r.data.code == 703) {
          this.$message.error("未登录");
        } else if (r.data.code == 500) {
          this.$message.error("系统繁忙，请稍后再试");
        } else if (r.data.code == 704) {
          this.$message.error("登录失效，请重新登录");
        }
      });
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  /* text-align: center; */
  line-height: 60px;
}
.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
}
</style>